﻿@using StatCan.OrchardCore.ContentFields.PredefinedGroup.Settings
@model StatCan.OrchardCore.ContentFields.PredefinedGroup.ViewModels.PredefinedGroupSettingsViewModel

<script at="Foot" depends-on="vuejs, vuedraggable">
    function initializeGroupsEditor(elem, data, defaultValue, modalBodyElement) {

        var previouslyChecked;

        var store = {
            debug: false,
            state: {
                groups: data,
                selected: defaultValue
            },
            addGroup: function () {
                if (this.debug) { console.log('add group triggered') };
               this.state.groups.push({ name: '', value: '' });
            },
            removeGroup: function (index) {
                if (this.debug) { console.log('remove group triggered with', index) };
               this.state.groups.splice(index, 1);
            },
            getGroupsFormattedList: function () {
                if (this.debug) { console.log('getGroupsFormattedList triggered') };
                return JSON.stringify(this.state.groups.filter(function (x) { return !IsNullOrWhiteSpace(x.name) }));
            }
        }

        var groupsTable = {
            template: '#groups-table',
            props: ['data'],
            name: 'groups-table',
            methods: {
                add: function () {
                    store.addGroup();
                },
                remove: function (index) {
                    store.removeGroup(index);
                },
                uncheck: function (index) {
                    if (index == previouslyChecked) {
                        $('#customRadio_' + index)[0].checked = false;
                        store.state.selected = null;
                        previouslyChecked = null;
                    }
                    else {
                        previouslyChecked = index;
                    }
                },
                getGroupsFormattedList: function () {
                    return store.getGroupsFormattedList();
                }
            }
        };

        var groupsModal = {
            template: '#groups-modal',
            props: ['data'],
            name: 'groups-modal',
            methods: {
                getGroupsFormattedList: function () {
                    return store.getGroupsFormattedList();
                },
                showModal: function () {
                    $(modalBodyElement).modal();
                },
                closeModal: function () {
                    var modal = $(modalBodyElement).modal();
                    modal.modal('hide');
                }
            }
        };

        new Vue({
            components: {
                groupsTable: groupsTable,
                groupsModal: groupsModal
            },
            data: {
                sharedState: store.state
            },
            el: elem,
            methods: {
                showModal: function () {
                    groupsModal.methods.showModal();
                }
            }
        });

    }

    function IsNullOrWhiteSpace(str) {
        return str === null || str.match(/^ *$/) !== null;
    }
</script>
<style asp-src="~/OrchardCore.ContentFields/Styles/optionsEditor.min.css" debug-src="~/OrchardCore.ContentFields/Styles/optionsEditor.css"></style>

<script at="Foot">
    initializeGroupsEditor(document.getElementById('@Html.IdFor(m => m)'), @Html.Raw(Model.Options), '@Model.DefaultValue', document.getElementsByClassName('@Html.IdFor(m => m)-ModalBody'));
</script>

<script type="text/x-template" id="groups-table">
    <table class="table table-bordered table-sm groups-table">
        <thead class="thead">
            <tr>
                <th scope="col">@T["Group Label"]</th>
                <th scope="col">@T["Value"]</th>
                <th scope="col" colspan="3">@T["Default?"]</th>
            </tr>
        </thead>
        <draggable v-model="data.groups" :element="'tbody'">
            <tr v-for="(group, index) in data.groups" :key="index">
                <td>
                    <textarea rows="2" class="form-control" v-model="group.name" placeholder="Enter code"></textarea>
                </td>
                <td>
                    <input type="text" class="form-control courrier" v-model="group.value" placeholder="Enter a value" />
                </td>
                <td class="text-center align-middle">
                    <div class="custom-control custom-radio ml-2">
                        <input type="radio" class="custom-control-input" :id="'customRadio_' + index" name="@Html.NameFor(m => m.DefaultValue)" v-bind:value="group.value" v-model="data.selected" v-on:click="uncheck(index)">
                        <label class="custom-control-label" title="@T["Set as default"]" v-bind:for="'customRadio_' + index"></label>
                    </div>
                </td>
                <td class="text-center">
                    <a v-on:click="remove(index)" href="javascript:void(0)" title="@T["Remove element from list"]" class="btn">
                        <i class="fas fa-times"></i>
                    </a>
                </td>
                <td class="text-center"><div class="btn cursor-move"><i class="fas fa-arrows-alt"></i></div></td>
            </tr>
        </draggable>
        <tfoot>
            <tr>
                <td class="col-sm-12 text-center" colspan="5">
                    <a v-on:click="add()" class="btn btn-light w-100 btn-sm"><i class="fas fa-plus small"></i> @T["Add an option"]</a>
                    <input class="form-control" id="@Html.IdFor(m => m.Options)" name="@Html.NameFor(m => m.Options)" type="hidden" v-bind:value="getGroupsFormattedList()" />
                </td>
            </tr>
        </tfoot>
    </table>
</script>

<script type="text/x-template" id="groups-modal">
    <div class="modal fade @Html.IdFor(m => m)-ModalBody text-left" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">@T["Edit Data"]</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="groups-textarea">@T["Groups"]</label>
                        <textarea id="groups-textarea" name="groups-textarea" rows="8" class="form-control" v-bind:value="JSON.stringify(data.groups)" v-on:input="data.groups = JSON.parse($event.target.value)"></textarea>
                        <span class="hint">@T["A JSON representation of the allowed values, e.g. {0}", "[ { name: 'First option', value: 'option1' }, { name: 'Second option', value: 'option2' } ]"]</span>
                    </div>
                    <div class="form-group">
                        <label for="groups-defaultvalue">@T["Default value"]</label>
                        <input id="groups-defaultvalue" name="groups-defaultvalue" class="form-control" type="text" v-model="data.selected" />
                        <span class="hint">@T["(Optional) The default to assign to the text field."]</span>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary btn-submit" v-on:click="closeModal()">@T["OK"]</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">@T["Cancel"]</button>
                </div>
            </div>
        </div>
    </div>
</script>

<div id="@Html.IdFor(m => m)" class="field-editor field-editor-predefinedgroup">
    @* <div class="row">
        <div class="form-group col-sm-6">
            <label asp-for="Editor">@T["What type of list editor should be used?"]</label>
            <select asp-for="Editor" class="form-control">
                <option value="@nameof(EditorOption.ButtonGroup)">@T["Button Group"]</option>
            </select>
        </div>
    </div> *@

    <div class="row">
        <div class="col-sm-6">
            <label asp-for="Options">@T["Options"]</label>
            <a href="javascript:void(0)" v-on:click="showModal" class="float-right" title="@T["Edit Data"]"><i class="fas fa-edit"></i></a>
            <groups-table :data="sharedState"></groups-table>
            <groups-modal :data="sharedState" v-on:reload-data="reloadData()"></groups-modal>
        </div>
    </div>
</div>



